/**
 * craco的作用是 在不用eject暴露react配置的情况下，对react进行各种配置。
 * 用于替代eject的暴露文件，作用和eject暴露的配置文件相同。
 * 使用了craco后，即使使用了eject暴露文件进行配置，也是无效的
 * 因为craco的配置，会覆盖react原有配置，也会覆盖eject中的配置。
 */
const CracoLessPlugin = require('craco-less');
const path = require('path');

process.env.PORT = 3001; // 设置启动时的端口为3001
process.env.BROWSER = "none"; // npm start时禁止自动启动浏览器
process.env.GENERATE_SOURCEMAP = false; // npm run build打包时，不再生成mapsource文件

module.exports = {
  plugins: [
    {
      plugin: CracoLessPlugin,
      options: {
        lessLoaderOptions: {
          lessOptions: {
            modifyVars: { '@primary-color': '#1890ff' },
            javascriptEnabled: true,
          },
        },
      },
    },
  ],
  babel: {
    plugins: [
      [
        "import",
        {
          "libraryName": "antd", // 表示要做antd的按需引入
          "libraryDirectory": "es",// antd用es的模块化规范
          "style": true //设置为true即是less
        }
      ]
    ]
  },
  webpack: {//webpack配置
    // 配置别名
    alias: {//设置别名是为了让后续引用的地方减少路径的复杂度
      "@": path.resolve("src"),
      "@components": path.resolve("src/components"),
      "@images": path.resolve("src/images"),
      "@pages": path.resolve("src/pages"),
      "@redux": path.resolve("src/redux"),
      "@router": path.resolve("src/router"),
      "@apis": path.resolve("src/apis"),
      "@utils": path.resolve("src/utils"),
      "@depjs": path.resolve("src/depjs")
    }
  },
  // 配置代理解决跨域
  devServer: {
    proxy: {
      "/api": {
        target: 'http://localhost:4000',
        changeOrigin: true,
        pathRewrite: {
          "^/api": ""
        }
      }
    }
  }
};